<template>
  <div>
  <h1> 答疑框</h1>


  <el-container>
    <el-header class="chat" >

      <div class="chats"  ref="MessageBox">
        <div v-for="(message, index) in messages" :key="index"
             :class="{ 'my-message': message.from === 'me' }" >

            <el-button  disabled v-if="message.from !== 'me'">{{ $route.query.name }} </el-button>
          <i :class="{ 'mx-1': message.from !== 'me'}" type="primary" >
            {{ message.text}}</i>
          <el-button disabled v-if="message.from === 'me'">我</el-button>

        </div>

      </div>
    </el-header>
    <el-main >
      <el-input
          v-model="inputText"
          :rows="2"
          type="textarea"
          placeholder="Please input"
      />

      <el-button type="success" @click="sendMsg">发送 </el-button>
      </el-main>
    <el-footer>

    </el-footer>
  </el-container>


  <div class="senderInput">

  </div>
  </div>
</template>

<script>
import {useLoginStateStore} from "../../store/storeLoginState.js";
import {ElNotification} from "element-plus";
import { ref, watch } from 'vue'

export default {
  name: "TeaQuestion",
  setup() {
    const loginStateStore = useLoginStateStore()
    return {
      loginStateStore: loginStateStore,
    }

  },
  data() {
    return {


      messages: [
        { from: '', text: '' },
      ],
      inputText:'',
      message:{
        senderNum:'',
        receiveNum:'',
        content:'',
      }
    }
  },
  watch: {
    '$route': "historyMsg",


  },

  created() {
    // this.sendMsg();
    //  this.historyMsg();
  },
  mounted() {
    //滚动底部 或者去掉
    // setTimeout(() => {
    //   this.$nextTick(() => {
    //     let scroll = this.$refs['MessageBox'].wrap // 获取对象
    //     scroll.scrollTop = scroll.scrollHeight
    //   })
    // }, 100)

  },

  methods:{


    receiveMsg(){
    },
    //历史记录
    historyMsg(){
      let _this = this;
      _this.messages=[];
      let stuNum=window.sessionStorage.getItem("userNum")
      let receiveNum=this.$route.query.receiveNum
      let url="/studyadmin/message/historyMsg"
      _this.$axios.get(url, {params: {senderNum: stuNum,receiveNum:receiveNum}}).then(function (serverData) {
        let  s=serverData.data.data;
        if(serverData.data.code===0){
          for (let i = 0; i < s.length; i++) {
            if(stuNum===s[i].senderNum){
              _this.messages.push({from:'me',text:s[i].content})
            }else {
              _this.messages.push({from:s[i].senderNum,text:s[i].content})
            }
          }

        }
      }).catch(function (error) {
        console.log("异步请求发生了错误:", error);
      })
    },


    //发送消息
    sendMsg(){
      let _this = this;
      let stuNum=_this.loginStateStore.loginUserName
      // _this.messages.from = this.$route.query.receiveNum
      _this.messages
      console.log("接受num",this.$route.query.receiveNum)
      _this.messages.push({from:'me',text:_this.inputText})

      _this.message.senderNum=stuNum;
      _this.message.receiveNum=this.$route.query.receiveNum;
      _this.message.content=_this.inputText;
      let url="/studyadmin/message/sendMsg"
      _this.$axios.post(url, _this.message).then(function (serverData) {
        console.log("接受的数据",serverData.data)
        if (serverData.data.code == 0) {
          ElNotification({
            title: 'Success',
            message: '发送成功',
            type: 'success',
          });
          // alert("90990")
        }
      })
      _this.inputText=""

    }
  },


}


</script>

<style scoped>
h1{
  margin-left: 200px;
}
.chat {
  /*background-color: #e1efe2;*/
  height: 300px;
  /*overflow-y:auto*/
}
.chats {
  display: flex;
  flex-direction: column;
  height: 300px;
  overflow-y:auto;
  /*overflow-y: scroll;*/
}
.mx-1{
  align-self: flex-end;
  margin-top: 20px;
  font-family:"微软雅黑",Arial,serif;
  /*font-size:30px;*/
  /*background-color: #bed8ea;*/
}

.my-message {
  align-self: flex-end;
  margin-right: 40px;
  margin-top: 20px;
  /*color: white;*/
  /*font-size:30px;*/
  font-family:"微软雅黑",Arial,serif;
  /*background-color: rgb(18,183,245);*/
}
</style>